<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue基础练习3</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
        .active{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="one" v-show:="isShow"></div>
        <div class="active" v-if:="isShow"></div>
        <div>
            <span v-if:="sex===1">男</span>
            <span v-else>女</span>
        </div>
        <div>
            <span v-if:="state===0">未发货</span>
            <span v-else-if:="state===1">正在配送</span>
            <span v-else-if:="state===2">已接收</span>
            <span v-else>已评价</span>
        </div>
        <template v-if:="sex===1">
            <span>男</span>
            <span>男图片</span>
        </template>
        <template v-else>
            <span>女</span>
            <span>女图片</span>
        </template>

    </div>
    <script src="./vue.global.js"></script>
    <script>
        const { createApp } = Vue;
        const app = createApp({
            data() {
                return {
                   isShow:false,
                   sex:0,   //0女，1男
                   state:3  //0未发货，1正在配送，2已接收，3已评价

                }
            }
        });
        app.mount('#app');
    </script>
</body>

</html>